$dialogWidth: 1024px;
$imgWidth: 340px;
$rightPadding: 20px;
$stepsWidth: 100px;
$headerHeight: 150px;
$footerHeight: 60px;

.get-started {
  width: $dialogWidth;
  height: ($dialogWidth * 0.618);
  display: flex;

  .select {
    width: 100%;
    height: 100%;

    .select-tips {
      width: 100%;
      height: 100px;
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .select-type {
      width: 100%;
      height: calc(100% - 100px);
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      &>div {
        width: 220px;
        height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid Red;
        border-radius: 6px;
      }
    }
  }

  .left {
    width: $imgWidth;
    height: 100%;
    background: #efefef;
    position: relative;
    .transparent_box{
      position: absolute;
      width: 30px;
      height: 30px;
      top: calc(50% + 35px);;
      right: 30px;
    }
  }

  .right {
    width: ($dialogWidth - $imgWidth);
    height: 100%;
    // border: 1px solid red;
    padding: $rightPadding;
    display: flex;

    .content {
      width: ($dialogWidth - $imgWidth - $rightPadding * 2 - $stepsWidth);

      &-header {
        height: $headerHeight;
        border-bottom: 1px solid #dedede;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        &-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 24px;

          &-text {
            font-size: 1.1em;
            font-weight: bold;
          }

          &-icon {
            cursor: pointer;
            font-size: 22px;
          }
        }

        &-tips {
          max-height: ($headerHeight - 24px);
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
          word-break: normal;
        }
      }

      &-body {
        height: ($dialogWidth * 0.618 - $rightPadding * 2 - $headerHeight - $footerHeight);
        padding: 20px 0;
        overflow: auto;
      }

      &-footer {
        height: $footerHeight;
        border-top: 1px solid #dedede;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .steps {
      width: $stepsWidth;
      // background: #efefef;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding: 20px 0;
    }
  }
}
